<template>
	<view class="pic">
		<image :src="poster" class="img"></image>
	</view>
	<video :src="videoUrl" :poster="poster" :change:src="video.setPoster" v-show="false"></video>
</template>

<script>
	export default {
		data() {
			return {
				poster: ''
			}
		},
		props: {
			videoUrl: String
		},
		methods: {
			getPoster(poster) {
				this.poster = poster
			}
		}
	}
</script>
<script lang="renderjs" module="video">
	export default {
		methods: {
			setPoster(newV, oldV, ownerInstance) {
				console.log(1111)
				let video = document.createElement("video");
				video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
				video.setAttribute('src', newV);
				video.setAttribute('width', 1000);
				video.setAttribute('height', 500);
				// 表示可以下载整个视频文件，即使用户不希望使用它。这样才能获取到视频文件
				video.setAttribute('preload', 'auto');
				// loadeddata 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。
				video.addEventListener('loadeddata', function() {
					let canvas = document.createElement("canvas"),
					width = video.width, //canvas的尺寸和图片一样
					height = video.height;
					canvas.width = width;
					canvas.height = height;
					canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
					let poster = canvas.toDataURL('image/jpeg'); //转换为base64
					console.log(poster)
					ownerInstance.callMethod('getPoster', poster)
				});
			}
		}
	}
</script>

<style lang="scss">
.pic{
	width: 750rpx;
	height: 516rpx;
}
</style>